<template>
<div class="home">
	<Card dis-hover>
		<h3 v-markedWords></h3>
	</Card>
	<Divider>状态</Divider>
	<Card dis-hover class="runtime">
		<div class="runtime-item">
			<p>内存大小限制</p>
			<small class="text-success">{{memory.jsHeapSizeLimit}}Mb</small>
		</div>
		<div class="runtime-item">
			<p>可使用内存</p>
			<small class="text-success">{{memory.totalJSHeapSize}}Mb</small>
		</div>
		<div class="runtime-item">
			<p>已使用内存</p>
			<small class="text-success">{{memory.usedJSHeapSize}}Mb</small>
		</div>
		<div class="runtime-item">
			<p>状态</p>
			<small class="text-success" :class="{'text-error': memory.totalJSHeapSize < memory.usedJSHeapSize }">{{memory.state}}</small>
		</div>
	</Card>
	<Divider>异常总览</Divider>
	<Card dis-hover>
		<div class="pandect">
			<Card class="exception-item">
				<h3>静态资源加载</h3>
				<span class="number" :class="error.static > 0 ? 'text-error' : 'text-success'">{{error.static}}</span>
			</Card>
			<Card class="exception-item">
				<h3>系统运行异常</h3>
				<span class="number" :class="error.error > 0 ? 'text-error' : 'text-success'">{{error.error}}</span>
			</Card>
			<Card class="exception-item">
				<h3>异步请求异常</h3>
				<span class="number" :class="error.xhr > 0 ? 'text-error' : 'text-success'">{{error.xhr}}</span>
			</Card>
		</div>
	</Card>
</div>
</template>

<script>
import {
	getNewestMemory
} from "@/apis/memory";

import {
	getStaticError
} from "@/apis/static";

import {
	getError
} from "@/apis/error";

import {
	getxhr
} from "@/apis/xhr";
import {
	throws
} from "assert";
import {
	setInterval
} from "timers";

export default {
	name: "home",
	data() {
		return {
			memory: {
				jsHeapSizeLimit: 0,
				totalJSHeapSize: 0,
				usedJSHeapSize: 0,
				state: "正常"
			},
			error: {
				static: 0,
				xhr: 0,
				error: 0
			}
		};
	},
	mounted() {
		this.gotMemory();
		this.gotStaticError();
		this.gotError();
		this.gotxhr();
		setInterval(() => {
			this.gotMemory();
			this.gotStaticError();
			this.gotError();
			this.gotxhr();
		}, 3000);
	},
	methods: {
		gotMemory() {
			getNewestMemory()
				.then(result => {
					this.memory = Object.assign(this.memory, result.data[0]);
				})
				.catch(err => {
					console.error(err);
				});
		},
		gotStaticError() {
			getStaticError()
				.then(res => {
					this.error.static = res.data.length;
				})
		},
		gotError() {
			getError()
				.then(res => {
					this.error.error = res.data.length;
				})
		},
		gotxhr() {
			getxhr()
				.then(res => {
					this.error.xhr = res.data.length;
				})
		}
	}
};
</script>
<style lang="less">
.runtime {
    .ivu-card-body {
        display: flex;
        .runtime-item {
            flex: 1;
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            margin: 15px;
            font-size: 18px;
            &:not(:last-child) {
                border-right: 1px solid #ddd;
            }
            small {
                margin-top: 10px;
            }
        }
    }
}
.pandect {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    & > * {
        flex: 1;
        margin: 0 10px 10px;
        & > .ivu-card-body {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            .number {
                margin-top: 15px;
                font-size: 30px;
                font-weight: bold;
            }
        }
    }
}
</style>
